import * as React from 'react'
import axios from '@/utils/axios'
import api from '@/api'
import { Table, Button, Input, Select, DatePicker, Pagination } from 'antd'
// import CustomerAdd from './add'
// import CustomerEdit from './edit'
import './styles.less'
// import Receviers from './receivers'

const Option = Select.Option

class TableBase extends React.Component<Props> {
  state = {
    // 显示相关
    loading: false,
    // modalAdd: false,
    // modalEdit: false,
    // modalReceivers: false,
    curPage: 1,
    total: 0
  }
  apiList = ''
  data = {
    // 不涉及显示的数据
    searchParams: {
      searchParam: '' // 模糊查询
      // 其他查询
      // customerId: '',
      // level: '',
      // contact: ''
    }
  }
  // 搜索栏配置
  searchColumns = [
    { title: '客户代码', type: 'text', key: 'customerId' },
    {
      title: '级别',
      type: 'select',
      key: 'level',
      options: []
    },
    { title: '专员', type: 'select', key: 'contact', options: [] }
  ]
  // 数据列配置
  tableColumns = [
    {
      key: 'no',
      title: '序号',
      render: (data, context, index) => {
        return (this.state.curPage - 1) * 10 + index + 1
      }
    },
    { dataIndex: 'customer_id', title: '客户代码' },
    { dataIndex: 'componey_name', title: '公司名称' },
    { dataIndex: 'address', title: '地址' },
    { dataIndex: 'principal', title: '负责人' },
    { dataIndex: 'contact', title: '联系方式' },
    { dataIndex: 'main_business', title: '主要营业方向' },
    { dataIndex: 'comment', title: '备注' }
    /*{
      key: 'operate',
      title: '操作',
      render: (text, record, index) => {
        return (
          <span>
            <Button
              onClick={() => this.handleCheckReceview(record.customer_id)}
            >
              查看收货方
            </Button>
            <Button
              type="primary"
              onClick={() => this.handleEditButton(record)}
            >
              编辑
            </Button>
          </span>
        )
      }
    }*/
  ]
  fetchData() {
    this.setState({
      loading: true
    })
    var reqParams = {
      search_params: this.data.searchParams,
      cur_page: this.state.curPage
    }
    axios.post(this.apiList, reqParams).then(res => {
      if (res.data && res.data.code == 200) {
        this.setState({
          tableData: res.data.list,
          loading: false,
          curPage: res.data.cur_page,
          total: res.data.total
        })
      }
    })
  }
  // 搜索栏单vlaue
  handleSearchValue(v, conf) {
    this.data.searchParams[conf.key] = v
    this.fetchData()
  }
  // 搜索栏时间范围
  handleSearchDates(v, conf) {
    this.data.searchParams[conf.key + 'Start'] = v[0]
    this.data.searchParams[conf.key + 'End'] = v[1]
    this.fetchData()
  }
  /*handleCheckReceview(id) {
    this.setState({
      modalReceivers: true,
      customer_id: id
    })
  }*/
  /*handleAddOnSuccess() {
    this.setState({
      modalAdd: false
    })
    this.fetchData()
  }
  handleAddOnCancel() {
    this.setState({
      modalAdd: false
    })
  }
  handleEditButton(record) {
    this.setState({
      modalEdit: true,
      currentEditData: record
    })
  }
  handleEditSuccsess() {
    this.setState({
      modalEdit: false
    })
    this.fetchData()
  }
  handleEditOnCancel() {
    this.setState({
      modalEdit: false
    })
  }*/
  handleSearch = v => {
    this.data.searchParams.searchParam = v
    this.fetchData()
  }
  handleChangePage = p => {
    this.setState({
      curPage: p
    })
    this.fetchData()
  }
  componentDidMount() {
    this.fetchData()
  }
  componentWillReceiveProps(props) {}

  renderSearchColumn(item) {
    switch (item.type) {
      case 'select':
        return (
          <Select
            style={{ width: 120 }}
            onChange={v => this.handleSearchValue(v, item)}
          >
            {item.options.map((op, index) => {
              return (
                <Option key={index} data={op} value={index}>
                  {op[item.key]}
                </Option>
              )
            })}
          </Select>
        )
      case 'date':
        return (
          <DatePicker.RangePicker
            onChange={(date, dateString) =>
              this.handleSearchDates(dateString, item)
            }
          />
        )
      case 'text':
      default:
        return (
          <Input
            style={{ width: item.width || '150px' }}
            onChange={v => this.handleSearchValue(v, item)}
          />
        )
    }
  }
  renderSearchArea() {
    return (
      <div className="search">
        <div>
          <Input.Search
            placeholder="输入需要搜索的关键字"
            onSearch={value => this.handleSearch(value)}
            defaultValue={this.state.searchParam}
            style={{ width: 260 }}
          />
        </div>
        <div className="filter">
          {this.searchColumns.map(item => {
            return (
              <div
                style={{
                  display: 'inline-block',
                  margin: '0 5px'
                }}
                key={item.key}
              >
                <label style={{marginRight: '10px'}}>{item.title}</label>
                {this.renderSearchColumn(item)}
              </div>
            )
          })}
        </div>
      </div>
    )
  }
  renderOthers() {}
  renderModals() {}
  render() {
    return (
      <div className="tablebase">
        {this.renderSearchArea()}
        {this.renderOthers()}
        <Table
          loading={this.state.loading}
          className="table"
          columns={this.tableColumns}
          dataSource={this.state.tableData}
          rowKey="customer_id"
          size="small"
          pagination={false}
        />
        <Pagination
          style={{ textAlign: 'right' }}
          onChange={this.handleChangePage}
          total={this.state.total}
          showTotal={(total, range) =>
            `${range[0]}-${range[1]} of ${total} items`
          }
          current={this.state.curPage}
        />
        {this.renderModals()}
      </div>
    )
  }
}
export default TableBase
